<template>
  <block v-if="visibleCtrl">
    <view
      @click="handleClose"
      class="fm-mask"
      :class="[
        'fm-mask--' + type,
        {'show': classCtrl}
      ]"
    >
    </view>
  </block>
</template>

<script>
/**
 * @author huangzhuo
 *
 * @module fm-mask
 * @desc 模态框背景
 *
 * @param { string } type = 背景类型，可选值dark, light。默认dark
 * @param { boolean } visible = 显示隐藏，可以用v-model双向绑定，或者:visible.sync双向绑定
 */
export default {
  name: 'FmMask',
  model: {
    prop: 'visible',
    event: 'toggle'
  },
  props: {
    visible: Boolean,
    type: {
      type: String,
      default: 'dark',
      validator (value) {
        return [
          'dark',
          'light'
        ].indexOf(value) > -1
      }
    }
  },
  data () {
    return {
      visibleCtrl: false,
      classCtrl: false
    }
  },
  computed: {
    _visible: {
      get () {
        return this.correctVisible(this.visible)
      },
      set (val) {
        this.$emit('toggle', val)
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    // 纠正显示隐藏
    correctVisible (val) {
      switch (val) {
        case true:
          this.handleOpen()
          break

        case false:
          this.handleClose()
          break
      }
      return val
    },
    handleClose () {
      // 操作传值
      this._visible = false
      // 传个事件
      this.$emit('close')
      // 立即移除淡入动画
      this.classCtrl = false
      // 延时200毫秒，隐藏标签
      setTimeout(() => {
        this.visibleCtrl = false
      }, 200)
    },
    handleOpen () {
      // 操作传值
      this._visible = true
      // 传个事件
      this.$emit('open')
      // 立即显示标签
      this.visibleCtrl = true
      // 延时50毫秒，添加淡入动画class
      setTimeout(() => {
        this.classCtrl = true
      }, 50)
    }
  }
}
</script>

<style lang="less">
@import "../asset/style/_variable.less";

.fm-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: @zindex-modal-background;
  overflow: hidden;
  transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);

  &.show {
    opacity: .5;
  }

  &.fm-mask--dark {
    background-color: @--color-black;
  }

  &.fm-mask--light {
    background-color: @--fill-base;
  }
}
</style>
